<template>
  <el-form class="login-form"
           status-icon
           :rules="loginRules"
           ref="loginForm"
           :model="loginForm"
           label-width="0">
    <h4 class="login-title">
      {{ $t('login.register') }}
      <top-lang></top-lang>
    </h4>
    <el-form-item v-if="website.tenantMode" prop="tenantId">
      <el-input size="small"
                v-show="true"
                @keyup.enter.native="handleRegister"
                v-model="loginForm.tenantId"
                auto-complete="off"
                :placeholder="$t('login.tenantId')">
        <i slot="prefix"
           class="icon-quanxian"></i>
      </el-input>
    </el-form-item>
    <el-form-item prop="username">
      <el-input size="small"
                @keyup.enter.native="handleRegister"
                v-model="loginForm.username"
                auto-complete="off"
                :placeholder="$t('login.email')">
        <i slot="prefix"
           class="icon-yonghu"></i>
      </el-input>
    </el-form-item>
    <el-form-item prop="password">
      <el-input size="small"
                @keyup.enter.native="handleRegister"
                :type="passwordType"
                v-model="loginForm.password"
                auto-complete="off"
                :placeholder="$t('login.password')">
        <i class="el-icon-view el-input__icon"
           slot="suffix"
           @click="showPassword"></i>
        <i slot="prefix"
           class="icon-mima"></i>
      </el-input>
    </el-form-item>
    <el-form-item prop="password2">
      <el-input size="small"
                @keyup.enter.native="handleRegister"
                v-model="loginForm.password2"
                auto-complete="off"
                :placeholder="$t('login.password2')">
        <i slot="prefix"
           class="icon-mima"></i>
      </el-input>
    </el-form-item>
    <el-form-item prop="code">
      <el-input size="small"
                @keyup.enter.native="handleRegister"
                v-model="loginForm.code"
                auto-complete="off"
                :placeholder="$t('login.code')">
        <i slot="prefix"
           class="icon-yanzhengma"
           style="margin-top:6px;"></i>
        <template slot="append">
          <span @click="handleSend"
                class="msg-text"
                :class="[{display:msgKey}]">{{msgText}}</span>
        </template>
      </el-input>
    </el-form-item>

    <el-form-item>
      <el-button type="primary"
                 size="small"
                 @click.native.prevent="handleRegister"
                 class="login-submit">{{$t('login.register')}}
      </el-button>
    </el-form-item>
  </el-form>
</template>

<script>
  import {mapGetters} from "vuex";
  // import {getEmailCode, registerEmail} from "@/api/user";
  import {getEmailCode} from "@/api/user";
  import {isEmail} from "@/util/validate";
  import website from '@/config/website';
  // import {getTopUrl} from "@/util/util";
  // import {info} from "@/api/system/tenant";


  export default {
    name: "register",

    data() {
      const validateEmail = (rule, value, callback) => {
        if (!isEmail(value)) {
          callback(new Error("邮箱格式不正确"));
        } else {
          callback();
        }
      };
      var validatePass = (rule, value, callback) => {
        if (value === '') {
          callback(new Error('请输入密码'));
        } else {
          callback();
        }
      };
      var validatePass2 = (rule, value, callback) => {
        if (value === '') {
          callback(new Error('请再次输入密码'));
        } else if (value !== this.loginForm.password) {
          callback(new Error('两次输入密码不一致!'));
        } else {
          callback();
        }
      };
      return {
        msgText: "",
        msgTime: "",
        msgKey: false,
        loginForm: {
          //租户ID
          tenantId: website.tenantId,
          //用户名
          username: "",
          //密码
          password: "",
          password2: "",
          //账户类型
          type: "register",
          //验证码的值
          code: "",
          //验证码的索引
          key: "",
          //预加载白色背景
          image: "",
        },
        loginRules: {
          tenantId: [
            {required: false, message: "请输入租户ID", trigger: "blur"},
          ],
          username: [
            // {required: true, message: "请输入用户名", trigger: "blur"},
            {required: true, trigger: "blur", validator: validateEmail}
          ],
          password: [
            {required: true, trigger: "blur", validator: validatePass},
            {min: 6, message: "密码长度最少为6位", trigger: "blur"},
          ],
          password2: [
            {required: true, trigger: "blur", validator: validatePass2},
            {min: 6, message: "密码长度最少为6位", trigger: "blur"},
          ],
          code: [
            {required: true, trigger: "blur", message: "请输入验证码"},
            {min: 6, message: "验证码为6位", trigger: "blur"},
            {max: 6, message: "验证码为6位", trigger: "blur"},
          ],
        },
        passwordType: "password"
      };
    },
    created() {
      this.msgText = this.config.MSGINIT;
      this.msgTime = this.config.MSGTIME;
    },
    mounted() {
    },
    computed: {
      ...mapGetters(["website", "tagWel"]),
      config() {
        return {
          MSGINIT: this.$t("login.msgText"),
          MSGSCUCCESS: this.$t("login.msgSuccess"),
          MSGTIME: 60
        };
      }
    },

    props: [],
    methods: {
      handleRegister() {
        this.$refs.loginForm.validate(valid => {
          if (valid) {
            const loading = this.$loading({
              lock: true,
              text: '注册中,请稍后。。。',
              spinner: "el-icon-loading"
            });
            this.$store.dispatch("LoginByUsername", this.loginForm).then(() => {
              this.$router.push({path: this.tagWel.value});
              loading.close();
            }).catch(() => {
              loading.close()
            });
          }
        });
      },
      handleSend() {
        if (this.msgKey) return;
        if (this.loginForm.username === '') {
          this.$message.warning("请先输入注册邮箱");
          return;
        }else if (!isEmail(this.loginForm.username)) {
          this.$message.warning("邮箱格式不正确");
          return;
        }

        getEmailCode(this.loginForm.username).then(res => {
          const data = res.data.data;
          this.loginForm.key = data.key;
          this.$message({
            type: "success",
            message: data.msg,
          });
        })

        this.msgText = this.msgTime + this.config.MSGSCUCCESS;
        this.msgKey = true;
        const time = setInterval(() => {
          this.msgTime--;
          this.msgText = this.msgTime + this.config.MSGSCUCCESS;
          if (this.msgTime === 0) {
            this.msgTime = this.config.MSGTIME;
            this.msgText = this.config.MSGINIT;
            this.msgKey = false;
            clearInterval(time);
          }
        }, 1000);
      },
      showPassword() {
        this.passwordType === ""
          ? (this.passwordType = "password")
          : (this.passwordType = "");
      },
    }
  };
</script>

<style>
</style>
